<template>
	<view class="main">
		<!-- #ifdef MP-WEIXIN -->
		<navbar :bgColor="bgColor" :btnColors='btnColor' title="常见问题" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->
		<view class="main-top">		
		   
			<view class="flex flex-direction bg-white p-20 service border-radius mt-20 pl-20 ml-20 mr-20" style="border-radius: 16rpx;" v-for="(item,index) in news_cates" :key="index">
				<view class="flex align-center text-center">									
					<text class="mt-20 service_title pb-15">{{item.name}}</text>
				</view>
				<view class="">
					<u-collapse
					    @change="change"
					    @close="close"
					    @open="open"
					  >
					    <u-collapse-item  :title="item.title"  name="Docs guide" v-for="(item,index1) in item.list"  :key="index1">
					      <text class="u-collapse-content">{{item.desc}}</text>
					    </u-collapse-item>					  
					  </u-collapse>
				</view>						 
			 </view>	
			 
		
					 
		</view>			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				...getApp().globalData.config,
				newlist:{},
				news_cates:[],
				serviceTel:''
			}
		},		
		onShow() {
			this.getNewInfo(1)
		},			
		methods: {	
			...getApp().globalData.function,
			
			
			callPhone(serviceTel) {
				this.$showModal({content: serviceTel,title:'呼叫客服 (9:00-21:00)',confirmColor:'#518FA0'}).then(res=>{
					if(res.confirm){		
						wx.makePhoneCall({
							phoneNumber: serviceTel,
							success: function() {
								console.log("拨打电话成功！")
							},
							fail: function() {
								console.log("拨打电话失败！")
							}
						})
					}
			   })
			},
			open(e) {
			              // console.log('open', e)
			            },
			            close(e) {
			              // console.log('close', e)
			            },
			            change(e) {
			              // console.log('change', e)
			            },
			openAlipayCustomerService() {
			  if (typeof my !== 'undefined') {
			    my.showToast({
			      content: '正在为您连接客服...',
			      duration: 2000
			    });
			    // 调用支付宝小程序的contact客服接口
			    my.contact({
					scene: 'alipay_small_program',
					success: () => {
						console.log('联系客服成功');
					},
					fail: (error) => {
						console.error('联系客服失败', error);
					}
				});
			  } else {
			    my.alert({
			      content: '请在支付宝小程序环境中使用'
			    });
			  }
			},
			getNewInfo(type){
			     let obj_data={
			        type
			     }
			     this.$http.NewList(obj_data).then(res=>{
			        if(res.resCode=='9999'){
						this.newlist=res.data.data
						this.serviceTel=res.data.serviceTel
						this.news_cates=res.data.news_cates
			        }
			     })
			},
			feedback(){
					this.$routers.router('/pages/pagesuser/feedback/index') 
			},
			//跳转详情
			routeUrl(event){
				this.$routers.router('/pages/discover/detail?id='+event.item.id,'navigateTo') 
				// console.log('event',event)
			},
			//确认收货
			update_member(){
			  let that = this;			   
			  this.$showModal({content: '您确定注销账号吗？',title:'提示',confirmColor:'#518FA0'}).then(res=>{
				if(res.confirm){
				  let obj_data={
					token:uni.getStorageSync('userInfo').token,
				  }
				  this.$http.updateMember(obj_data).then(res=>{
					that.$showToast(res.resMessage) 
					uni.clearStorageSync();	
					setTimeout(()=>{
							that.$routers.router('/pages/login/index','navigateTo') 
						
					},3000)          
				  })
				}
			  })
			},
		}
	}
</script>

<style>
	page{
		background: #F0F9FE;
	}
	button::after{
		border: none !important;
	}
	.lease_info{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			width: 120rpx;
			font-size: 20rpx;
	}
	.btns{
		position: absolute;
		    top: 4px;
		    background: border-box;
	}
	.btnsub{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		position: absolute;
		right: 20rpx;
		color: #fff;
		background: #518FA0;
		border-radius: 26px;
		height: 44px;
		width: 560rpx;
	}
	.submit{
		width: 100%;
		position: fixed;
		bottom: -15px;
		height: 90px;
		padding: 12px;
		box-sizing: border-box;
		background: #fff;
		right: 20rpx;
		
	}
	.search_block{
		display: flex;
		align-items: center;
		text-align: center;
		width: 38rpx;
		/* height: 38rpx; */
		background: #78A8B5;
		margin-top:10rpx;
		padding-top: 2rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-left: 20rpx;
	}
	.online_tag{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-top: 30rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 36rpx;
	}
	.online_service{
		display: flex;
		flex-direction: row;
		margin-left: 50rpx;
		margin-top: 20rpx;
	}
	.images_icon{
		width: 60.11rpx;
		height: 60rpx;
	}
	.main{
		background-image: url('https://image.tea-milk.site/2024-10-12/1838c818412abc08cc79092eb37070bf.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 474rpx;
	}
	.content{
		background-color: white !important;	
	}
	
	.service_hello{
		margin-left: 20rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #011F37;
		line-height: 7rpx;
	}
	.service_image{
		position: absolute;
		right: 30rpx;
		margin-top: -105rpx;
	}
	.service_time{
		margin-left: 20rpx;
		margin-top: 60rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(1, 31, 55, 0.6);
		line-height: 7rpx;
	}
	.service{
		padding-top: 50rpx;
	}
	.service_hot{
		font-weight: bold;
		font-size: 32rpx;
		color: #011F37;
	}
	
	.service_title{
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		padding-left: 10rpx;
	}
	
	.service_fw{
		font-weight: 400;
		font-size: 28rpx;
		color: #FFA200;
	}
	.service_info{
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(1, 31, 55, 0.6)
	}
	.mine__cell{
	  box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.01);
	  border-radius: 8rpx !important;
	}
	
	.classify-cell{
		display: flex;
		flex-direction: row;	
		justify-content: space-between;			
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 33rpx;		
		background-color: #fff;		
	}
	.service_one{
	  margin-bottom: 5rpx;
	  width: 20%;
	  height: 100rpx;
	  display: flex;
	  flex-direction: column;
	  padding-left: 15rpx;
	  font-size: 28rpx;
	}
	
</style>
